<template>
  <view class="">
    <view class="flex my_tabbar flex_col_center">
      <view
        class="sign_tabar"
        v-for="(item, index) in lists"
        :key="index"
        @click="urlPage(item.pagePath)"
      >
        <view class="">
          <!-- <text class="custom-icon" :class="'custom-icon-'+item.iconPath" :style="{color:current==index?'#3F826C':'#CCC'}"></text> -->
          <image
            v-if="current == index"
            class="icon"
            :src="item.iconOnPath"
            mode="aspectFit"
          ></image>
          <image
            v-else
            class="icon"
            :src="item.iconPath"
            mode="aspectFit"
          ></image>
          <text v-if="types == 1 && item.text === '购物车' && cartTag > 0" class="label">{{
            cartTag
          }}</text>
        </view>

        <text :style="{ color: current == index ? '#40AE36' : '#666666 ' }">{{
          item.text
        }}</text>
      </view>
    </view>
    <view class="tabar_height"></view>
  </view>
</template>

<script>
var app = getApp();
export default {
  props: {
    current: {
      type: String,
    },
    types: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      tag: 0,
      list: [
        {
          text: "首页",
          iconPath: "../../static/images/shouye2.png",
          iconOnPath: "../../static/images/shouye1.png",
          pagePath: "/pages/tabar/index",
        },
        {
          // iconPath: "mn_dingdan_fill",
          text: "订单",
          pagePath: "/pages/tabar/order",
          iconPath: "../../static/images/dingdan1.png",
          iconOnPath: "../../static/images/dingdan2.png",
        },
        {
          // iconPath: "mn_dingdan_fill",
          text: "购物车",
          iconPath: "../../static/images/shoping.png",
          iconOnPath: "../../static/images/shoping1.png",
          pagePath: "/pages/tabar/shopcart",
        },
        {
          // iconPath: "wode-mianxing",
          text: "我的",
          pagePath: "/pages/tabar/user",
          iconPath: "../../static/images/my.png",
          iconOnPath: "../../static/images/my1.png",
        },
      ],
      list1: [
        // {
        //   text: "商品",
        //   iconPath: "../../static/images/goods2.png",
        //   iconOnPath: "../../static/images/goods1.png",
        //   pagePath: "/pages/shop/index",
        // },
        {
          text: "首页",
          iconPath: "/static/images/dianpu.svg",
          iconOnPath: "/static/images/dianpufill.svg",
          pagePath: "/pages/shop/index",
        },
        {
          text: "分类",
          iconPath: "../../static/images/fenlei1.png",
          iconOnPath: "../../static/images/fenlei.png",
          pagePath: "/pages/tabar/classify",
        },
        {
          // iconPath: "mn_dingdan_fill",
          text: "购物车",
          iconPath: "../../static/images/shoping.png",
          iconOnPath: "../../static/images/shoping1.png",
          pagePath: "/pages/tabar/shopcart",
        },
        // {
        // 	// iconPath: "wode-mianxing",
        // 	text: "订单",
        // 	pagePath: "/pages/tabar/user",
        // 	iconPath: "../../static/image/tab4.svg",
        // 	iconOnPath: "../../static/image/tab4_on.svg",
        // },
      ],
      lists: [],
    };
  },
  watch: {
    types: {
      handler(newVal) {
        this.lists = newVal == 1 ? this.list : this.list1;
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    cartTag: function () {
      //防止为0判断失误，变为字符串
      var num = this.tag || uni.getStorageSync("cartTag") || 0;
      if (num >= 100) {
        num = "99+";
      }
      return num;
    },
  },
  methods: {
    changetag(num = null) {
      //也可能为0，会逃过判断
      if (num !== null) {
        uni.setStorageSync("cartTag", num);
        if (num >= 100) {
          this.tag = "99+";
        } else {
          this.tag = "" + num;
        }
      } else {
        this.tag = uni.getStorageSync("cartTag");
      }
    },
    urlPage(data) {
      // 获取当前页面栈的信息
      const pages = getCurrentPages();
      // 获取当前页面的路径
      if(pages.length) {
        const currentPage = pages[pages.length - 1].route;
        // 打印当前页面路径
        this.$store.commit("changeCurrentRoute", currentPage);
      }
      uni.switchTab({
        url: data,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.tabar_height {
  height: 20rpx;
}
image {
}
.my_tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: $white;
  z-index: 999;
  border-top: 1rpx solid #f6f6f6;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;

  .sign_tabar {
    height: 100rpx;
    justify-content: center;
    display: flex;
    flex-direction: column;
    font-size: 26rpx;
    align-items: center;
    // flex-basis: 25%;
    flex: 1;
  }

  .label {
    position: absolute;
    // margin-top: -5px;
    background: red;
    padding: 0 8rpx;
    // width: 15px;
    // height: 15px;
    // line-height: 15px;
    border-radius: 20rpx;
    text-align: center;
    color: $white;
    font-size: 20rpx;
  }

  .icon {
    width: 44rpx;
    height: 44rpx;
  }
}

// @media (max-width:800px) {
// 	.tabar_height {
// 		height: 50px;
// 	}
// }

// @media (min-width:800px) {
// 	.tabar_height {
// 		height: 80px;
// 	}

// 	.my_tabbar {
// 		width: 600px !important;

// .sign_tabar {
// 	font-size: 20rpx !important;
// 	height: 80rpx !important;

// 	.custom-icon {
// 		font-size: 26rpx;
// 	}

// }

// 	}
// }
</style>
